class CollapseItem extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });

    const tmpl = document.getElementById("collapse_item_tmpl");

    let cloneTmpl = tmpl.content.cloneNode(true);
    let style = document.createElement("style");

    this.isShow = true; // 标识每个item是否显示

    style.textContent = `
    :host{
      width: 100%
    }
      .title{
        background: #f1f1f1;
        line-height: 35px;
        height: 35px;
        cursor: pointer;
      }
      .content{
        font-size: 16px;
      }
    `;
    shadow.appendChild(style)
    shadow.appendChild(cloneTmpl)

    this.titleEle = shadow.querySelector(".title");

    this.titleEle.addEventListener("click", () => {
      // console.log(this.isShow, 'name');
      document.querySelector("heli-collapse").dispatchEvent(new CustomEvent("changeName", {
        detail: {
          name: this.getAttribute("name"),
          isShow: this.isShow
        }
      }))
    })

  }

  static get observedAttributes() {
    return ['active', 'title', 'name'];
  }

  attributeChangedCallback(key, oldValue, newValue) {
    switch (key) {
      case 'active':
        this.activeList = JSON.parse(newValue);
        break;
      case 'title':
        this.titleEle.innerHTML = newValue;
        break;
      case 'name':
        this.name = newValue;
        // if(this.activeList){
        //   let isShow = this.activeList.includes(key);
        //   this.shadowRoot.querySelector(".content").style.display = isShow? 'block': "none"
        // }
        break;
      default:
        break;
    }
    let name = this.name;

    if (this.activeList && name) {
      this.isShow = this.activeList.includes(name);
      this.shadowRoot.querySelector(".content").style.display = this.isShow ? 'block' : "none";
    }
  }
}

export default CollapseItem;